<template>
    <div class="zt-dialog-solt-2">
        <div class="flex station-head-box">
            <div class="station-head1">{{ details.radioStationName }}{{ details.radioStationCode }}</div>
            <div class="station-head2" v-if="pltAntenna"><img src="@/assets/images/antenna-icon.png" /></div>
            <div class="station-head3">
                <div class="sh-box flex-s">
                    <div class="sh-1">{{ pltAntenna ? pltAntenna.antennaName : '...' }}</div>
                    <div class="sh-2">|</div>
                    <div class="sh-3">发射中</div>
                    <img class="sh-4" src="@/assets/images/js.png" />
                </div>
            </div>
            <div class="station-head4 flex-s">
                <img v-if="pltAntenna" src="@/assets/images/play-img.png" title="控制天线" @click="handleAntennaScope">
                <img src="@/assets/images/amend.png" title="修改电台" @click="editClick">
                <img src="@/assets/images/delete-bin2.png" title="删除电台" @click="deleteDevice">
                <img src="@/assets/images/qqq.png" @click="toTransfer()" title="传输" />
                <img src="@/assets/images/st.png" title="重启电台" @click="restartClick">
            </div>
        </div>

        <div class="bg-black">状态信息</div>

        <div class="flex station-information">
            <div style="flex: auto; width: 550px;">
                <!-- <div class="flex" style="margin-bottom: 10px;">
                    <status-par label="状态:" :value="formartStatus(details.status)">
                        <template slot>
                            <img src="@/assets/images/station2.png" />
                        </template>
                    </status-par>
                    <status-par label="驻波:" value="暂无~" :long="3">
                        <template slot>
                            <img src="@/assets/images/station2.png" />
                        </template>
                    </status-par>
                    <status-par label="频率:" value="暂无~" unit="MHz" :long="5">
                        <template slot>
                            <img src="@/assets/images/station2.png" />
                        </template>
                    </status-par>
                </div> -->
                <div class="flex" style="margin-bottom: 10px;">
                    <status-par label="状态:" :value="formartStatus(details.status)">
                        <template slot>
                            <img src="@/assets/images/station2.png" />
                        </template>
                    </status-par>
                    <status-par label="温度:" :value="attribute.temperature" unit="℃" :long="5">
                        <template slot>
                            <img src="@/assets/images/temperature.png" />
                        </template>
                    </status-par>
                    <status-par label="电流:" :value="attribute.current" unit="A" :long="5">
                        <template slot>
                            <img src="@/assets/images/electricity.png" />
                        </template>
                    </status-par>
                    <!-- <status-par label="功率:" value="暂无~" unit="高">
                        <template slot>
                            <img src="@/assets/images/station2.png" />
                        </template>
                    </status-par> -->
                </div>
                <div class="flex" style="margin-bottom: 10px;">
                    <status-par label="前向电压:" :value="attribute.forewordValtage" unit="V" :long="5">
                        <template slot>
                            <img src="@/assets/images/station6.png" />
                        </template>
                    </status-par>
                    <status-par label="后向电压:" :value="attribute.backValtage" unit="V" :long="5">
                        <template slot>
                            <img src="@/assets/images/station6.png" />
                        </template>
                    </status-par>
                </div>

            </div>
            <div style="flex: auto;margin-left: 20px;">
                <div class="flex" style="margin-bottom: 10px;">
                    <status-par label="硬件版本:" :value="details.hardwareVersion" color="#9A9DAA">
                        <template slot>
                            <img src="@/assets/images/hardware.png" />
                        </template>
                    </status-par>
                    <status-par label="软件版本:" :value="details.softwareVersion" color="#9A9DAA"></status-par>
                </div>
                <div class="flex" style="margin-bottom: 10px;">
                    <status-par :value="getGps(details.radioStationGps)" :unit="'('+details.radioStationName+')'" color="#9A9DAA">
                        <template slot>
                            <img src="@/assets/images/point.png" />
                        </template>
                    </status-par>
                </div>
            </div>

        </div>

        <!-- <div class="bg-blue flex-s">当前执行任务:重庆万州电台连续测试</div>
        <div class="bg-black">发送信息</div>

        <div class="send-box">
            <div class="send-1">12</div>
            <div class="send-2">32</div>
        </div>

        <div class="bg-black">频率图</div> -->


        <!-- 天线控制 -->
        <right-dialog :title="pltAntenna ? pltAntenna.antennaName : ''" :visible="isOpen" @closeDialog="cancelAntenna"
            class="antennaScope">
            <template v-slot:default>
                <sw-antenna :antennaId="antennaId" v-if="isOpen"></sw-antenna>
            </template>
        </right-dialog>

        <!-- 编辑电台 -->
        <right-dialog title="编辑电台" :visible="isEdit" @closeDialog="closEdit" class="antennaScope">
            <template v-slot:default>
                <edit-device v-if="isEdit" :radioStationId="detailRow.radioStationId" @close="closEdit"></edit-device>
            </template>
        </right-dialog>
    </div>
</template>

<script>
import {delAntenna } from "@/api/business/antenna";
import { getStation, restartRadioStation } from "@/api/business/station";
import RightDialog from "@/components/TZ/RightDialog"
import statusPar from "@/views/business/radio/components/statusPar.vue";
import editDevice from "@/views/business/radio/components/editDevice.vue";
import swAntenna from "./swAntenna.vue";
import Compass from "@/components/TZ/Compass"
export default {
    name: 'deviceDetails',
    emits: ['close'],
    components: { RightDialog, statusPar, swAntenna, Compass, editDevice },
    props: {
        detailRow: {
            type: Object,
            default: () => { }
        },
    },
    watch: {
    },
    data() {
        return {
            // 详情数据
            details: {},
            // 是否加载完成
            isLoad: false,
            // 详细信息，温度等数据
            attribute: {},
            // 天线id
            antennaId: null,
            // 天线数据
            pltAntenna: null,
            // 是否打开天线控制界面
            isOpen: false,
            // 天线控制
            antennaScope: {},
            // 是否打开编辑界面
            isEdit: false,
        }
    },
    created() {
        this.init()
    },
    methods: {
        // 初始化获取详情
        init() {
            this.attribute = {};
            const radioStationId = this.detailRow.radioStationId;
            getStation(radioStationId).then(response => {
                this.attribute = JSON.parse(response.data.attribute);
                this.details = {
                    ...response.data,
                    attribute: this.attribute
                }
                this.isLoad = true;
                if (this.details.pltAntennaList && this.details.pltAntennaList.length > 0) {
                    this.pltAntenna = this.details.pltAntennaList[0]
                }
            });
        },
        // 打开天线详情
        handleAntennaScope() {
            if (this.pltAntenna) {
                this.antennaId = this.pltAntenna.antennaId
                this.isOpen = true;
            }
        },
        // 关闭天线控制
        cancelAntenna() {
            this.isOpen = false
        },

        /** 打开修改页面 */
        editClick() {
            this.isEdit = true
        },
        // 关闭修改页面
        closEdit() {
            this.isEdit = false;
            this.init();
        },
        // 重启电台
        restartClick() {
            const data = { "cmd": "radio-restart", "data": { "radioStationCode": this.details.radioStationCode } }
            restartRadioStation(data).then(rs => {
                this.$message.success("操作成功!");
            });
        },



        /** 跳转到传输页面 */
        toTransfer() {
            this.$router.push({ path: '/radio/transfer/index', query: { srcId: this.details.radioStationCode } });
        },
        // 格式化GPS
        getGps(gps) {
            if (!gps) return "";
            let gpsList = gps.split("|");
            let gpsObj = { x: gpsList[0], y: gpsList[1] }
            return this.$coord.toDegreeXY(gpsObj);
        },
        // 格式化状态
        formartStatus(status) {
            switch (status) {
                case '0':
                    return '正常';
                case '1':
                    return '异常';
                case '2':
                    return '离线';
                default: "~";
            }
        },

        // 删除电台
        deleteDevice() {
            this.$confirm('是否删除《' + this.details.radioStationName + '》电台?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delAntenna(this.details.radioStationId).then(rs => {
                    if (rs.code == 200) {
                        this.$message.success("删除成功!");
                        this.$emit('close')
                    } else {
                        this.$message.error("删除失败!");
                    }
                })
            }).catch(er => { });
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.status-left {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #2BA0C8;
    font-style: normal;
    text-transform: none;
}

.zt-dialog-solt-2 {
    width: 1000px;
}
</style>